import React, { Fragment } from 'react';
import { connect } from 'dva';
import BasePage from './BasePage'
import { Card, Space, PageHeader, Breadcrumb, Descriptions, Popover, message, List, Button } from 'antd'
import { FileDoneOutlined } from '@ant-design/icons'
import style from '../assets/less/indexLess.less'
import CurrentLocation from '../components/currentLocation'
import breadArr from '../constant/breadArr'
var utils = require('../utils/utils.js')

class IndexPage extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount(){
    this.props.dispatch({
      type:"seekTechnology/getSeekTechnologyTableData"
    })

  }

  cardReplacePage = url => {
    if (url == "/mechanismOperation") {
      if (this.props.user.userType == 4 && this.props.mechanism.examinationStatus != 2) {
        message.warning("请等待机构审核通过！")
        return
      }
    }
    this.props.dispatch({
      type: 'app/appMenuReplacePage',
      data:url
    })
  }

  getToken = () => {
    this.props.dispatch({
      type:"test/getToken"
    })
  }

  renderIndexPage = user => {
    if(user.userName == "admin"){
      return(
        <Fragment>
          <PageHeader
            className="site-page-header"
            onBack={() => null}
            title="快速导航"
            subTitle="Fast Navigation"
            backIcon={false}
          >
          </PageHeader>
          <Space size='large'>
            <Card className={style.indexCard} title="用户管理">
              <a onClick={() => { this.cardReplacePage('/userManagement') }}>>查看所有已注册的技术供应商，机构用户，并进行相关操作</a>
            </Card>
            <Card className={style.indexCard} title="管理员管理">
              <a onClick={() => { this.cardReplacePage('/administratorsManagement') }}>>查看所有已添加的管理委员会账号，并进行相关操作</a>
            </Card>
          </Space>
        </Fragment>
      )
    }
    
    if ((user.userType != 3 && user.userType != 4) || user == {}) {
      return (
        <Fragment>
          <PageHeader
            className="site-page-header"
            onBack={() => null}
            title="快速导航"
            subTitle="Fast Navigation"
            backIcon={false}
          >
          </PageHeader>
          <Space size='large'>
            <Card className={style.indexCard} title="验证技术">
              <a onClick={() => { this.cardReplacePage('/application') }}>>如果您是技术供应商，点击此处您可以开始对技术进行验证</a>
            </Card>
            <Card className={style.indexCard} title="查询技术">
              <a onClick={() => { this.cardReplacePage('/search') }}>>如果您想要购买技术，点击此处可以开始查询和对比技术</a>
            </Card>
            <Card className={style.indexCard} title="征求技术">
              <a onClick={() => { this.cardReplacePage('/seekTechnology') }}>>如果已验证的技术并不满足您的购买需求，点击发布技术征求通知</a>
            </Card>
          </Space>
          <PageHeader
            className="site-page-header"
            onBack={() => null}
            title="征求技术"
            subTitle="Soliclt"
            backIcon={false}
          >
          </PageHeader>
          <List
            style={{width:800}}
            dataSource={this.props.seekTechnologyList}
            pagination={{
              pageSize:4
            }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<FileDoneOutlined/>}
                  title={<Space size="large">{item.functionalMaterials}{item.technologyCategory}</Space>}
                  description={item.technicalDetails}
                />
              </List.Item>
            )}
          >
          </List>
        </Fragment>
      )
    }

    if (user.userType == 3) {
      return (
        <Fragment>
          <PageHeader
            className="site-page-header"
            onBack={() => null}
            title="快速导航"
            subTitle="Fast Navigation"
            backIcon={false}
          >
          </PageHeader>
          <Space size='large'>
            <Card className={style.indexCard} title="技术验证信息">
              <a onClick={() => { this.cardReplacePage('/technologyExamination') }}>>查看并审核技术供应方上传的技术信息</a>
            </Card>
            <Card className={style.indexCard} title="机构认证信息">
              <a onClick={() => { this.cardReplacePage('/mechanismExamination') }}>>查看并审核验证/测试机构上传的认证信息</a>
            </Card>
            <Card className={style.indexCard} title="资料上传模块">
              <a onClick={() => { this.cardReplacePage('/uploadFile') }}>>发布认证验证时所需的资料信息</a>
            </Card>
            <Card className={style.indexCard} title="专利数据模块">
              <a onClick={() => { this.cardReplacePage('/patentDataAdminister') }}>>查看专利数据信息，并进行增删改查操作</a>
            </Card>
          </Space>
        </Fragment>

      )
    }

    if (user.userType == 4) {
      return (
        <Fragment>
          <PageHeader
            className="site-page-header"
            onBack={() => null}
            title="快速导航"
            subTitle="Fast Navigation"
            backIcon={false}
          >
          </PageHeader>
          <Space>
            <Card className={style.indexCard} title="机构操作">
              <a onClick={() => { this.cardReplacePage('/mechanismOperation') }}>>查看技术供应方上传的技术信息，并提供相关验证/测试文件</a>
            </Card>
            {this.renderMechanismCertificationPage(this.props.user.mechanismId)}
          </Space>
          {this.renderMechanismInformationPage(this.props.user.mechanismId)}
        </Fragment>
      )
    }
  }

  renderMechanismCertificationPage = mechanismId => {
    if (!mechanismId) {
      return (
        <Card className={style.indexCard} title="认证机构">
          <a onClick={() => { this.cardReplacePage('/certification') }}>>成为验证机构/测试机构，点击此处您可以开始进行认证</a>
        </Card>
      )
    }
  }

  renderMechanismInformationPage = mechanismId => {
    if (mechanismId) {
      if (this.props.user.mechanismId != this.props.mechanism.id ) {
        this.props.dispatch({
          type: "mechanismOperation/getMechanismByMechanismId",
          data: { mechanismId: mechanismId }
        })
      }

      return (
        <Fragment>
          <Descriptions title={this.props.mechanism.mechanismName} bordered="true" column={2} style={{ marginTop: 30 }}>
            <Descriptions label="审核状态">{this.props.mechanism.examinationStatus == 1 ? <a>正在审核</a> : (this.props.mechanism.examinationStatus == 0 ? <Popover content={this.props.mechanism.reason}><a>审核未通过</a></Popover> : <a>审核通过</a>)}</Descriptions>
            <Descriptions label="联系电话">{this.props.mechanism.phone}</Descriptions>
            <Descriptions label="邮箱">{this.props.mechanism.email}</Descriptions>
            <Descriptions label="地址">{this.props.mechanism.address}</Descriptions>
          </Descriptions>
        </Fragment>
      )
    }
  }

  render() {
    return (
      <BasePage>
        <CurrentLocation breadArr={breadArr.IndexPage}></CurrentLocation>
        {this.renderIndexPage(this.props.user)}
      </BasePage>
    )
  }
}

const mapStateToProps = state => {
  let user = state.app.user
  let mechanism = state.mechanismOperation.mechanism
  let seekTechnologyList = state.seekTechnology.seekTechnologyList
  return {
    user,
    mechanism,
    seekTechnologyList
  }
}

export default connect(mapStateToProps)(IndexPage);
